
<template>
  <div style="margin-bottom: 1em; text-align: left">
    <el-popover placement="right" width="30%" v-model:visible="showFilter">
      <div>
        <el-row type="flex" justify="start" :gutter="10" style="text-align: left">
          <el-col :span="6" style="text-align: right">
            <span>是否删除:</span>
          </el-col>
          <el-col :span="18">
            <el-radio-group v-model="is_deleted">
              <el-radio label>不过滤</el-radio>
              <el-radio label="true">已删除</el-radio>
              <el-radio label="false">未删除</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start" :gutter="10" style="text-align: left">
          <el-col :span="6" style="text-align: right">
            <span>是否私有:</span>
          </el-col>
          <el-col :span="18">
            <el-radio-group v-model="is_private">
              <el-radio label>不过滤</el-radio>
              <el-radio label="true">私有</el-radio>
              <el-radio label="false">共有</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="showFilter = false">取消</el-button>
        <el-button type="primary" size="mini" @click="filteList">确定</el-button>
      </div>
      <template #reference>
        <el-button @click="showFilter = true" size="mini" type="primary">过滤</el-button>
      </template>
    </el-popover>
  </div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    :border="true"
    @selection-change="handleSelectionChange"
    size="mini"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="id" label="Id" min-width="30%" header-align="center"></el-table-column>
    <el-table-column prop="title" label="标题" min-width="100%" header-align="center">
      <template #default="scope">
        <router-link :to="{name:'articleDetail', params:{id:scope.row.id}}">{{scope.row.title}}</router-link>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="内容" min-width="200%" header-align="center">
      <template #default="scope">{{ $filters.ellipsis(scope.row.content, 10) }}</template>
    </el-table-column>
    <el-table-column prop="category.name" label="目录" min-width="50%" header-align="center"></el-table-column>
    <el-table-column prop="tags" label="标签" min-width="150%" header-align="center">
      <template #default="scope">
        <el-tag v-for="tag in scope.row.tags" :key="tag.id" class="my-tag">
          {{
            tag.name
          }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="view_counter" label="浏览量" min-width="50%" header-align="center"></el-table-column>
    <el-table-column
      prop="last_modified_at"
      label="修改时间"
      width="120"
      header-align="center"
      :formatter="timeFormatter"
    ></el-table-column>
    <el-table-column
      prop="created_at"
      label="创建时间"
      header-align="center"
      :formatter="timeFormatter"
    ></el-table-column>
    <el-table-column prop="is_private" label="是否私有" min-width="50%" header-align="center"></el-table-column>
    <el-table-column prop="is_deleted" label="已删除" min-width="50%" header-align="center"></el-table-column>
    <el-table-column label="操作" width="120" fixed="right">
      <template #default="scope">
        <el-button type="text" size="small" @click="handleEditArticle(scope.row)">编辑</el-button>
        <el-popconfirm
          title="确定要执行吗"
          icon="el-icon-warning"
          iconColor="red"
          @confirm="handleToggleDelete(scope.row)"
        >
          <template #reference>
            <el-button
              type="text"
              size="small"
              :style="'color: ' + (scope.row.is_deleted ? 'lightgreen' : 'red')"
            >{{ scope.row.is_deleted ? "恢复" : "删除" }}</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top:1em;"
    background
    layout="prev, pager, next"
    :current-page="page"
    :page-size="pageSize"
    :total="total"
    @current-change="getArticleList"
    :hide-on-single-page="true"
  ></el-pagination>
  <div style="margin-top: 20px; text-align: left">
    <el-button
      @click="selectAll()"
      :type="allSelected ? 'info' : 'primary'"
      size="mini"
    >{{ allSelected ? "取消全选" : "全选" }}</el-button>
    <el-button
      type="danger"
      size="mini"
      :disabled="multipleSelection.length == 0"
      @click="handleBulkDelete"
    >批量删除或恢复</el-button>
  </div>
</template>

<script>
import {
  getArticles,
  deleteArticle,
  restoreArticle,
  bulkToggleArticleDelete,
} from "../../api/articles.js";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      total: 100,
      page: 1,
      pageSize: 10,
      tableData: [],
      multipleSelection: [],
      allSelected: false,
      showFilter: false,
      is_deleted: "",
      is_private: "",
    };
  },
  mounted() {
    this.getArticleList(this.page);
  },
  methods: {
    getArticleList(page, is_deleted = "", is_private = "") {
      getArticles(
        page - 1,
        this.pageSize,
        (is_deleted = is_deleted),
        (is_private = is_private)
      ).then((res) => {
        this.total = res.data["total"];
        this.tableData = res.data["items"];
      });
    },
    selectAll() {
      console.log("table", this.$refs.multipleTable);
      this.$refs.multipleTable.toggleAllSelection();
      this.allSelected = !this.allSelected;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("selections: ", this.multipleSelection);
    },
    timeFormatter(row, col, val, idx) {
      return this.$filters.timeFormatter(val);
    },
    handleToggleDelete(row) {
      if (row.is_deleted) {
        restoreArticle(row.id).then(() => {
          row.is_deleted = !row.is_deleted;
        });
      } else {
        deleteArticle(row.id).then(() => {
          row.is_deleted = !row.is_deleted;
        });
      }
    },
    handleBulkDelete() {
      console.log("bulk delete", this.multipleSelection);
      let ids = [];
      for (let item of this.multipleSelection) {
        ids.push(item.id);
      }
      bulkToggleArticleDelete(ids).then(() => {
        this.getArticleList(this.page);
        ElMessage.success({
          message: "操作成功",
        });
      });
    },
    filteList() {
      this.getArticleList(this.page, this.is_deleted, this.is_private);
      this.showFilter = false;
    },
    handleEditArticle(row) {
      console.log("edit: ", row)
      var obj = JSON.stringify(row)
      this.$router.push({
        name: "articleCreation",
        params: {
          article: obj
        }
      })
    }
  },
};
</script>

<style>
</style>
